<template>
  <div id="goods" class="app-container">
    <div class="filter-container">
      <!-- 使用搜索组件 -->
      <search-item ref="search" :query="queryInfo" @filter="handleFilter" />
      <!-- 添加商品 -->
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="openAddDialog">
        添加商品
      </el-button>
      <!-- 使用添加商品弹框组件 -->
      <add-item ref="add" :dialog="addFormVisible" @close="closeAddDialog" @add="handleAddGoods" />
    </div>

    <!-- 表格区域 -->
    <el-table :data="goodslist" border stripe width="100%">
      <el-table-column type="index" label="序号" width="100px" align="center" />
      <el-table-column prop="goods_name" label="商品名称" min-width="700px" />
      <el-table-column prop="goods_price" label="商品价格（元）" width="160px" align="center" />
      <el-table-column prop="goods_weight" label="商品重量" width="160px" align="center" />
      <el-table-column prop="add_time" label="创建时间" width="160px" align="center">
        <template slot-scope="scope">
          {{ scope.row.add_time | formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="{row}">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialog(row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeGoodsById(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用分页组件 -->
    <pagination-item v-show="total>0" :total="total" :page.sync="queryInfo.pagenum" :limit.sync="queryInfo.pagesize" @pagination="handlePagination" />

    <!-- 使用编辑用户弹框组件 -->
    <edit-item ref="edit" :dialog="editFormVisible" @close="closeEditDialog" @edit="handleEditGoods" />
  </div>
</template>

<script>
import { goodList, addGoods, categoriesList, removeGoods, getGoodsById, editGoods } from '@/api/goods'
// 引用时间过滤器
import { formatTime } from '@/utils/myfiliters'
// 1.导入组件
import SearchItem from './components/search'
import AddItem from './components/add'
import EditItem from './components/edit'
import PaginationItem from './components/pagination'

export default {
  name: 'Goods',
  // 2.注册组件
  components: {
    'search-item': SearchItem,
    'add-item': AddItem,
    'edit-item': EditItem,
    'pagination-item': PaginationItem
  },
  // 添加过滤器
  filters: {
    formatTime // 格式化时间
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      },
      // 商品列表
      goodslist: [],
      // 总数据条数
      total: 0,
      // 添加用户对话框弹窗，开始是关闭的
      addFormVisible: false,
      // 编辑用户对话框弹窗，开始是关闭的
      editFormVisible: false
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 根据分页获取对应的商品列表
    getGoodsList() {
      const data = {
        query: this.queryInfo.query, // 查询参数，可以为空
        pagenum: this.queryInfo.pagenum, // 当前页面，不能为空
        pagesize: this.queryInfo.pagesize // 每页显示条数，不能为空
      }
      // 将拿到的数据发送给后台
      goodList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 处理搜索后的分页，查询就是拿到 query数据，重新分页
    handleFilter(query) {
      const info = {
        query: query.query, // 查询参数，可以为空
        pagenum: this.queryInfo.pagenum, // 当前页面，不能为空
        pagesize: this.queryInfo.pagesize // 每页显示条数，不能为空
      }
      goodList(info).then((response) => {
        this.apiResult(response)
      })
    },

    // 点击分页器后的分页
    handlePagination() {
      const info = {
        query: this.$refs['search'].queryInfo.query, // 查询参数，可以为空
        pagenum: this.queryInfo.pagenum, // 当前页面，不能为空
        pagesize: this.queryInfo.pagesize // 每页显示条数，不能为空
      }
      goodList(info).then((response) => {
        this.apiResult(response)
      })
    },
    // 拿到后台响应的数据，渲染到页面
    apiResult(response) {
      if (response.data.meta.status !== 200) {
        return this.$message.error('获取商品列表失败！')
      }
      this.goodslist = response.data.data.goods
      this.total = response.data.data.total
    },

    // 二、添加商品开始
    // 1.点击按钮，打开弹框
    openAddDialog() {
      this.addFormVisible = true
      this.getCategoriesList()
    },
    // 获取所有商品分类数据
    getCategoriesList() {
      categoriesList().then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$http.error('获取商品分类数据失败！')
        }
        this.$refs['add'].categoriesList = response.data.data
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeAddDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃添加商品？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        // 关闭对话框和清除表单
        this.addFormVisible = false
        // 做一个标识 ref="add"，让它可以找到 ref属性值为 add的组件
        this.$refs['add'].$refs['addFormRef'].resetFields()
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    // 3.接收组件的请求增加方法，向后台发送请求
    handleAddGoods(data) {
      this.addFormVisible = false
      addGoods(data).then((response) => {
        if (response.data.meta.status !== 201) {
          return this.$message.error('添加商品失败！')
        }
        // 重置表单
        this.$refs['add'].$refs['addFormRef'].resetFields()
        this.$refs['add'].activeIndex = '0'
        // 刷新列表
        this.getGoodsList()
        this.$notify({ title: '提示', message: '添加商品成功！', type: 'success' })
      })
    },
    // 添加结束

    // 三、删除
    removeGoodsById(data) {
      // 弹框提示用户是否要删除
      var msg = '此操作将永久删除该项商品, 是否继续?'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        removeGoods(data).then((response) => {
          this.goodslist.splice(data.goods_id, 1)
          if (response.data.meta.status !== 200) {
            return this.$message.error('删除商品失败！')
          }
          this.getGoodsList()
          this.$notify({ title: '提示', message: '删除商品成功！', type: 'success', duration: 2000 })
        })
      }).catch(() => {
        this.$message.info('已取消操作！')
      })
    },

    // 四、编辑提交分类
    // 展示编辑提交分类的对话框
    openEditDialog(data) {
      // 1.先进行请求，渲染数据到编辑对话框
      getGoodsById(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('查询商品分类信息失败')
        }
        this.$refs['edit'].editForm = response.data.data
        this.editFormVisible = true
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeEditDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃编辑商品？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        // 关闭对话框
        this.editFormVisible = false
      }).catch(() => {
        this.$message('已取消操作！')
      })
    },
    // 3.接收组件的请求编辑方法，向后台发送请求
    handleEditGoods(data) {
      this.editFormVisible = false
      editGoods(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('更新商品信息失败！')
        }
        this.getGoodsList() // 刷新列表
        this.$notify({ title: '提示', message: '更新商品信息成功！', type: 'success' }) // 提示修改成功
      })
    }
    // 编辑结束

  }
}
</script>

<style scoped>
.filter-container {
  display: flex;
  padding-bottom: 20px;
}
</style>
